import React from 'react';
import { Typography, Row, Col, Card, Form, Input, Button, message } from 'antd';
import { GithubOutlined , WechatOutlined ,QqOutlined, EnvironmentOutlined } from '@ant-design/icons';
import './style.less';

const { Title, Paragraph } = Typography;
const { TextArea } = Input;

const ContactPage: React.FC = () => {
  const [form] = Form.useForm();

  interface FormValues{
    name: string;
    email: string;
    subject: string;
    content: string;
  }


  const handleSubmit = (values: FormValues) => {
    console.log('Received values:', values);
    message.success('消息已发送，我们会尽快回复您！');
    form.resetFields();
  };

  return (
    <div className='contact-container'>
      <div className='contact-intro'>
        <Title level={2}>联系我们</Title>
        <Paragraph>
          如果您对我们的实验室有任何疑问或合作意向，欢迎通过以下方式联系我们。
          我们将尽快回复您的咨询。
        </Paragraph>
      </div>

      <Row gutter={[24, 24]} className='contact-content'>
        <Col xs={24} md={12}>
          <Card title='联系方式' className='contact-info-card'>
            <ul className='contact-info-list'>
              <li>
                <GithubOutlined className='contact-icon' />
                <div>
                  <Title level={4}>Github</Title>
                  <Paragraph>https://github.com/EpiHome</Paragraph>
                </div>
              </li>
              <li>
                <WechatOutlined className='contact-icon' />
                <div>
                  <Title level={4}>微信公众号</Title>
                  <Paragraph>西邮EPI软件实验室</Paragraph>
                </div>
              </li>
              <li>
                <EnvironmentOutlined className='contact-icon' />
                <div>
                  <Title level={4}>地址</Title>
                  <Paragraph>
                    西安邮电大学长安校区西区
                    <br />
                    创新创业基地二楼电子科技创客空间
                  </Paragraph>
                </div>
              </li>
              <li>
                <QqOutlined className='contact-icon' />
                <div>
                  <Title level={4}>QQ群</Title>
                  <Paragraph>群号:557643185</Paragraph>
                </div>
              </li>
            </ul>
          </Card>
        </Col>
        <Col xs={24} md={12}>
          <Card title='留言咨询' className='contact-form-card'>
            <Form form={form} layout='vertical' onFinish={handleSubmit}>
              <Form.Item
                name='name'
                label='姓名'
                rules={[{ required: true, message: '请输入您的姓名' }]}
              >
                <Input placeholder='请输入您的姓名' />
              </Form.Item>
              <Form.Item
                name='email'
                label='邮箱'
                rules={[
                  { required: true, message: '请输入您的邮箱' },
                  { type: 'email', message: '请输入有效的邮箱地址' },
                ]}
              >
                <Input placeholder='请输入您的邮箱' />
              </Form.Item>
              <Form.Item
                name='subject'
                label='主题'
                rules={[{ required: true, message: '请输入咨询主题' }]}
              >
                <Input placeholder='请输入咨询主题' />
              </Form.Item>
              <Form.Item
                name='message'
                label='内容'
                rules={[{ required: true, message: '请输入咨询内容' }]}
              >
                <TextArea rows={4} placeholder='请输入咨询内容' />
              </Form.Item>
              <Form.Item>
                <Button type='primary' htmlType='submit' block>
                  提交
                </Button>
              </Form.Item>
            </Form>
          </Card>
        </Col>
      </Row>
    </div>
  )
};

export default ContactPage;